<template>
	<view class="charts-box">
		<qiun-data-charts type="ring" :tooltip-show="false" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script setup>
	import {
		ref,
		watchEffect
	} from 'vue'
	const props = defineProps({
		count: {
			type: Number,
			default: '89'
		},
		flag: {
			type: String,
			default: '0'
		}
	})

	const chartData = ref({
		series: [{
			data: [{
				"name": "",
				"value": 100,
			}],
		}]
	})

	const opts = ref({})

	watchEffect(() => {
		opts.value = {
			rotate: false,
			rotateLock: false,
			color: ["#7491FE"],
			padding: [5, 5, 5, 5],
			enableScroll: false,
			legend: {
				show: false
			},
			dataLabel: false,
			series: {
				color: '#4f54f6'
			},
			title: {
				name: props.flag === '0' ? "收藏数" : props.flag === '1' ? '错题数' : '最佳分数',
				fontSize: 15,
				color: "#666666"
			},
			subtitle: {
				name: props.count,
				fontSize: 25,
				color: "#7cb5ec"
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 15,
					border: false,
					borderWidth: 3,
					borderColor: "#FFFFFF"
				},
			}
		}
	})
</script>

<style lang="scss">
	.charts-box {
		width: 100%;
		height: 200px;
	}
</style>